import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableOpacity
} from 'react-native'

class Header extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    return (
      <View style = {styles.container}>
        <TouchableOpacity onPress={this.props.leftIconEvent} style={[styles.leftICon, styles.icon]}>
          <Image style={{width: 9, height: 16}} source={require('../../img/back.png')}></Image>
        </TouchableOpacity>
        <View style={styles.titleView}>
          <Text style={styles.title}>{this.props.title}</Text>
        </View>
        <TouchableOpacity style={[styles.rightICon, styles.icon]}>
          {this.props.rightElement ? this.props.rightElement : <Text></Text>}
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    height: 48,
    backgroundColor:'#fff',
  },
  titleView: {
    flex: 1,
    alignItems:'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 16,
    color: '#333333',
  },
  icon: {
    width: 40,
    alignItems:'center',
    justifyContent: 'center',
  },
  leftICon: {

  },
  rightICon: {
    marginRight: 10
  }
})

export default Header
